<template>
  <div>
    <div class="container-fluid">
      <div class="common_title">文章编辑</div>
      <div class="container-fluid common_con">
        <form class="form-horizontal article_form" id="form" ref="form">
          <div class="form-group">
            <label for="inputTitle" class="col-sm-2 control-label"
              >文章标题：</label
            >
            <div class="col-sm-10">
              <input
                type="text"
                name="title"
                class="form-control title"
                id="inputTitle"
                v-model="article.title"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCover" class="col-sm-2 control-label"
              >文章封面：</label
            >
            <div class="col-sm-10">
              <img :src="article.cover" class="article_cover" />
              <input
                name="cover"
                type="file"
                id="inputCover"
                @change="dochange"
                ref="file"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCategory" class="col-sm-2 control-label"
              >文章类别：</label
            >
            <div class="col-sm-4">
              <select
                class="form-control category"
                name="categoryId"
                v-model="article.categoryId"
              >
                <option
                  v-for="item in categoryList"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">发布时间：</label>
            <div class="col-sm-4">
              <el-date-picker
                v-model="article.date"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
                >
              </el-date-picker>
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label"
              >文章内容：</label
            >
            <div class="col-sm-10">
              <div id="editor"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button
                type="submit"
                class="btn btn-success btn-release"
                @click.prevent="doRelease('已发布')"
              >
                发布
              </button>
              <button
                type="submit"
                class="btn btn-default btn-draft"
                @click.prevent="doRelease('草稿')"
              >
                存为草稿
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
// 导入wangeditor
import E from "wangeditor";
import { getArticleCategory, publishArticle,editArticle } from "./article.js";
export default {
  name: "articleRelease",
  data() {
    return {
      article: {
        title: "请输入文章标题...",
        cover: "",
        categoryId: 1,
        date: `${new Date().getFullYear()}-${new Date().getMonth()+1}-${new Date().getDate()}`,
        content: "请输入文章内容...",
      },

      editor: "",
      //   文章类别列表
      categoryList: {},
    };
  },
  methods: {
    dochange() {
      // 获取选中的内容
      let file = this.$refs.file.files[0];
      //   console.log(file)
      // 将图片转成blob格式
      this.article.cover = URL.createObjectURL(file);
    },
    async doRelease(state) {
      // 1.创建formData
      let fd = new FormData(this.$refs.form);
      //   2.手动追加参数
      fd.append("date", this.article.date);
      fd.append("content", this.editor.txt.html());
      fd.append("state", state);
      //   判断是否是编辑页
      if (this.$route.params) {//编辑
          fd.append("id", this.article.id);
          let res = await editArticle(fd);
      }else {//发布
          //   3.发布请求
          let res = await publishArticle(fd);
          console.log(res);
      }
      //   4.弹窗提示
      this.$message(`${state}成功`);
      //   5.跳转列表页
      this.$router.push("/articleList");
    },
  },
  async created() {
    let res = await getArticleCategory();
    // console.log(res);
    this.categoryList = res.data.data;
  },
  mounted() {
    //   判断是否是编辑页
    if (this.$route.params) {
      this.article = this.$route.params;
    }
    //   wangEditor
    this.editor = new E("#editor");
    // 或者 const editor = new E( document.getElementById('div1') )
    this.editor.create();
    this.editor.txt.html(this.article.content);
  },
};
</script>

<style></style>
